<!-- 展会列表 -->
<template>
	<view class="">
		<view class="my-2" :class="{ 'bg-white p-2 rounded_10 shadow': bgstyle }" v-for="(hotItem, hotIdx) of list" :key="hotIdx" @click="toJoin(hotItem)">
			<view class="hotspot">
				<image class="my-2" :src="hotItem.thumb" mode="aspectFill"></image>
				<text class="status" :class="[classState(hotItem.activity_status)]">{{ textState(hotItem.activity_status) }}</text>
			</view>
			<view class="cont">
				<view class="font c_3 lh_42 font-weight-bold">{{ hotItem.title }}</view>
				<view class="c_9 font_24">
					<text>{{ hotItem.start_time }}</text>
					<text class="mx-5">{{ hotItem.address }}</text>
				</view>
				<view class="flex justify-between align-center">
					<view class="tag c_9 font_24 my-1">
						<text class="p-1 mr-1" v-for="item of hotItem.label" :key="item.id">{{ item.bq_name }}</text>
					</view>
					<view class="">
						<text class="font_24 c_9" @click.stop="detailShow = true">详情 ></text>
						<u-modal :show="detailShow" title="展会详情" confirmText="关闭" @confirm="detailShow = false">
							<view class="slot-content w-100">
								<scroll-view scroll-y="true">
									<view class="u-content detail_popup">
										<view v-if="!hotItem.content" class="p-2 mt-3"><u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty></view>
										<view class="text" v-else><u-parse :content="hotItem.content"></u-parse></view>
									</view>
								</scroll-view>
							</view>
						</u-modal>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: ['list', 'bgstyle'],
	data() {
		return {
			detailShow: false
		};
	},
	computed: {
		classState(val) {
			return function(val) {
				switch (val) {
					case 1:
						return 'be_start';
						break;
					case 2:
						return 'have_start';
						break;
					case 3:
						return 'have_end';
						break;
					default:
						return 'be_start';
						break;
				}
			};
		},
		textState(val) {
			return function(val) {
				switch (val) {
					case 1:
						return '即将开始';
						break;
					case 2:
						return '正在开展';
						break;
					case 3:
						return '已结束';
						break;
					default:
						return '即将开始';
						break;
				}
			};
		}
	},
	methods: {
		toJoin(val) {
			// activity_status   1 即将开始，2 已开始，3，已结束
			// if (val.activity_status == 1) {
			// 	uni.navigateTo({
			// 		url: '/subPages/exhibition/before?id=' + val.id + '&active=' + val.activity_status
			// 	});
			// } else {
				uni.navigateTo({
					url: '/subPages/exhibition/index?id=' + val.id + '&active=' + val.activity_status
				});
			// }
		}
	}
};
</script>

<style lang="scss" scoped>
.hotspot {
	position: relative;
	image {
		width: 100%;
		height: 220rpx;
	}
}
.cont {
	.time {
		color: $color8;
	}

	.tag {
		text {
			background-color: #f2f2f2;
			border-radius: 10rpx;
		}
	}
}
.detail_popup {
	max-height: 700rpx;
}

.status {
	position: absolute;
	top: 0;
	right: 0;
	color: #ffffff;
	font-size: 24rpx;
	padding: 5rpx 15rpx;
	border-radius: 0 10rpx 0 10rpx;
}
.be_start {
	background: $color14;
}
.have_start {
	background: #f0722d;
}
.have_end {
	background: rgba(144, 147, 153, 1);
}
</style>
